<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 供应商基本资料
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--    增加模态框-->
    <el-dialog title="编辑" :visible.sync="increase" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="供应商名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="供应商编码">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.contact"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="increase = false">取 消</el-button>
        <el-button type="primary" size="small" @click="saveEdit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="container">
      <div class="handle-box">
        <!--        增加供应商-->
        <el-button type="primary" @click="addGong" size="small"
          >增加供应商</el-button
        >

        <el-dialog title="增加供应商" :visible.sync="dialogFormVisible">
          <el-form :model="form" label-width="100px">
            <el-form-item label="供应商名称">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商编码">
              <el-input v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.contact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small"
              >取 消</el-button
            >
            <el-button type="primary" size="small" @click="addbaocun"
              >添 加</el-button
            >
          </div>
        </el-dialog>
        <el-input
          v-model="Search"
          placeholder="请输入供应商名称"
          class="handle-input mr10"
        ></el-input>
        <el-button
          type="primary"
          size="small"
          @click="sousuo"
          icon="el-icon-search"
          >搜索</el-button
        >
        <el-button type="primary" @click="fanhui" size="small">返回</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" width="55" align="center"
          ><template slot-scope="scope">{{
            (query.pageIndex - 1) * query.pageSize + (scope.$index + 1)
          }}</template></el-table-column
        >
        <el-table-column
          align="center"
          prop="name"
          label="供应商名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="code"
          label="供应商编码"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="contact"
          label="联系人"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="listDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination" :visible.sync="pageVisible">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.contact"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="update()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 5
      },
      Search: "",
      tableData: [],
      multipleSelection: [],
      delList: [],
      dialogFormVisible: false,
      pageVisible: true,
      form: {
        name: "",
        code: "",
        phone: "",
        contact: "",
        address: ""
      },
      editVisible: false,
      pageTotal: 0,
      idx: -1,
      id: -1,
      isSearchPagetion: false
    };
  },
  created() {
    this.gongyingshangList();
  },
  /*  mounted() {
    this.axPost();
  },*/
  methods: {
    pageHidden() {},
    //搜过功能
    sousuo() {
      this.$axios
        .get(this.$api.gongyingshang.mohuseach + "?pattern=" + this.Search)
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.Search = "";
          this.$message.success("搜索成功"); //重新获取数据库的数据
          this.dialogFormVisible = false;
          this.isSearchPagetion = true;
          this.pageTotal = res.data.data.length;
        })
        .catch(err => {
          console.log(err);
        });
    },
    fanhui() {
      this.gongyingshangList();
      this.isSearchPagetion = false;
    },
    /*通过axios请求数据*/
    gongyingshangList() {
      this.$axios
        .get(this.$api.gongyingshang.gongyingshangList, {
          params: {
            pageNum: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(res => {
          console.log(res.data.data);
          var result = res.data.data.list;
          console.log(result);
          this.tableData = result;
          this.pageTotal = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("数据库出错");
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.pageVisible = false;
    },
    //添加操作
    addGong() {
      this.dialogFormVisible = true;
      this.form = {
        name: "",
        code: "",
        phone: "",
        contact: "",
        address: ""
      };
    },
    //添加保存
    addbaocun() {
      this.$axios
        .post(this.$api.gongyingshang.adddata, this.form)
        .then(res => {
          console.log(res.data.data);

          this.gongyingshangList();
          this.$message.success("添加成功"); //重新获取数据库的数据
          this.dialogFormVisible = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 删除操作
    listDelete(row) {
      console.log(row.id);
      this.$axios
        .post(this.$api.gongyingshang.listDelete + "/" + row.id)
        .then(res => {
          var result = res.data;
          if (result.code == "1" && result.success == true) {
            this.$message.success("删除成功！");
            this.gongyingshangList();
          } else {
            this.$message.error("删除失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 编辑操作
    update() {
      this.editVisible = false;
      this.$axios
        .post(this.$api.gongyingshang.update, this.form)
        .then(res => {
          console.log(res.data.data);
          this.gongyingshangList(); //重新获取数据库的数据
          this.$message.success(`修改成功`);
          this.gongyingshangList(); //重新获取数据库的数据
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleEdit(index, row) {
      this.idx = index;
      this.form = { ...row };
      this.editVisible = true;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      if (this.isSearchPagetion == true) {
        this.sousuo();
      } else {
        this.gongyingshangList();
      }
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}
.handle-input {
  width: 200px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
>>>>>>> 8586a9872e5a17863e04227ad3d03f883dfeae9c
